<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商城首页</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      body {
        padding-top: 50px;
      }

      .img-ads {
        width: 495px;
        height: 300px;
      }

      .product {
        height: 400px;
      }

      .product img {
        max-height: 200px;
      }

      .new {
        position: absolute;
        top: -2px;
        right: -1px;
      }
    </style>
  </head>
  <body>
		<p class="container-fluid">
			<div class="row">
				<div class="col-lg-12">
					col-lg-12
					</div>
				</div>

		</p>
						图标： <span class="glyphicon glyphicon-heart"></span>
		<span class="glyphicon glyphicon-star"></span>
		字体图标：<span class="fa fa-bath">字体</span>
<i class="fa fa-address-card"></i>
		<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<h1 class="h1">h1</h1>
<div  class="text-center">在中心</div>
<div class="text-left">在左边</div>
<div class="text-right">在右边</div>
 press  <kbd> <kbd>ctl </kbd>+<kbd>k</kbd></kbd>
 <table class="table table-striped table-hover table-bordered ">
	 <tr class="success">
		 <th>1</th>
		  <th>2</th>
			 <th>3</th>
			  <th>4</th>
	 </tr>
	  <tr class="danger">
	 		 <th>1</th>
	 		  <th>2</th>
	 			 <th>3</th>
	 			  <th>4</th>
	 </tr>
	   <tr>
	 		 <th>2</th>
	 		  <th>2</th>
	 			 <th>3</th>
	 			  <th>4</th>
	 </tr>
	 
 </table>
 <form class="form-inline">
	 <div class="form-group">
		 <label for="for"></label>
		 <input type="text" class="form-control" id="for"/>
		 <button type="button" class="btn-success btn-lg">成功</button>
		  <button type="button" class="btn-danger btn-xs">成功</button>
		 <input type="submit" class="btn-primary" />
	 </div>
 </form>
 <img src="images/iphonex.jpg"  class="img-responsive"/>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my_nav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#" style="padding: 0px 15px 0px 15px;">
            <img src="images/tmall.jpeg" class="img-responsive" style="height: 50px; width: 50px;">
          </a>
        </div>
        <div class="collapse navbar-collapse" id="my_nav">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">热卖商品</a></li>
            <li><a href="#">全球购</a></li>
            <li><a href="#">商城推荐</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">更多品类 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">数码</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">书籍</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">居家</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">旅行</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-right">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="请输入商品名称">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button">搜索</button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="jumbotron">
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <img src="images/mac.jpeg" class="img-responsive img-ads">
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <img src="images/iphonex.jpg" class="img-responsive img-ads">
          </div>
        </div>
      </div>
      <div class="page-header">
        <h3>热卖商品<a href="#"><small class="pull-right">查看所有</small></a></h3>
      </div>
      <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="thumbnail product">
            <a href="product.html"><img src="images/mac.jpeg" alt="商品图片"></a>
            <div class="caption">
              <h3>Macbook Pro</h3>
              <p>性价比最高的苹果电脑</p>
              <p><del>原价：￥12999.00</del>&nbsp;&nbsp;现价：<strong>￥9999.00</strong></p>
              <p>月销量：500&nbsp;&nbsp;评价数：5000</p>
              <p>
                <a class="btn btn-primary" href="#" role="button">加入购物车</a>
                <a class="btn btn-danger" href="#" role="button">立即购买</a>
              </p>
            </div>
            <span class="label label-success new">新品</span>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="thumbnail product">
            <a href="product.html"><img src="images/mac.jpeg" alt="商品图片"></a>
            <div class="caption">
              <h3>Macbook Pro</h3>
              <p>性价比最高的苹果电脑</p>
              <p><del>原价：12999.00元</del>&nbsp;&nbsp;现价：9999.00元</p>
              <p>月销量：500&nbsp;&nbsp;评价数：5000</p>
              <p>
                <a class="btn btn-primary" href="#" role="button">加入购物车</a>
                <a class="btn btn-danger" href="#" role="button">立即购买</a>
              </p>
            </div>
            <span class="label label-success new">新品</span>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="thumbnail product">
            <a href="product.html"><img src="images/mac.jpeg" alt="商品图片"></a>
            <div class="caption">
              <h3>Macbook Pro</h3>
              <p>性价比最高的苹果电脑</p>
              <p><del>原价：12999.00元</del>&nbsp;&nbsp;现价：9999.00元</p>
              <p>月销量：500&nbsp;&nbsp;评价数：5000</p>
              <p>
                <a class="btn btn-primary" href="#" role="button">加入购物车</a>
                <a class="btn btn-danger" href="#" role="button">立即购买</a>
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="thumbnail product">
            <a href="product.html"><img src="images/mac.jpeg" alt="商品图片"></a>
            <div class="caption">
              <h3>Macbook Pro</h3>
              <p>性价比最高的苹果电脑</p>
              <p><del>原价：12999.00元</del>&nbsp;&nbsp;现价：9999.00元</p>
              <p>月销量：500&nbsp;&nbsp;评价数：5000</p>
              <p>
                <a class="btn btn-primary" href="#" role="button">加入购物车</a>
                <a class="btn btn-danger" href="#" role="button">立即购买</a>
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="thumbnail product">
            <a href="product.html"><img src="images/mac.jpeg" alt="商品图片"></a>
            <div class="caption">
              <h3>Macbook Pro</h3>
              <p>性价比最高的苹果电脑</p>
              <p><del>原价：12999.00元</del>&nbsp;&nbsp;现价：9999.00元</p>
              <p>月销量：500&nbsp;&nbsp;评价数：5000</p>
              <p>
                <a class="btn btn-primary" href="#" role="button">加入购物车</a>
                <a class="btn btn-danger" href="#" role="button">立即购买</a>
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="thumbnail product">
            <a href="product.html"><img src="images/mac.jpeg" alt="商品图片"></a>
            <div class="caption">
              <h3>Macbook Pro</h3>
              <p>性价比最高的苹果电脑</p>
              <p><del>原价：12999.00元</del>&nbsp;&nbsp;现价：9999.00元</p>
              <p>月销量：500&nbsp;&nbsp;评价数：5000</p>
              <p>
                <a class="btn btn-primary" href="#" role="button">加入购物车</a>
                <a class="btn btn-danger" href="#" role="button">立即购买</a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <nav aria-label="Page navigation">
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <p>Copyright &copy; Wgssmart</p>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
